<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>新闻管理系统</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}">

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js" th:src="@{https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js}"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js" th:src="@{https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js}"></script>

	<link rel="icon" type="image/png" sizes="144x144" href="../static/images/1.ico" th:href="@{/images/1.ico}"/>
	<style type="text/css">
		.L_bg1{
			margin-top:50px;
		}
		.L_bg1 img{
			width:100%;
		}
		.bgwhite1{
			background-color:white;
			padding:15px 10px 0px;
			border-radius:10px;
			opacity:0.9;
		}
		.bgwhite2{
			background-color:white;
			padding:10px;
			border-radius:10px;
			opacity:0.9;
		}
		.L_bg2{
			margin-top:15px;
		}
		.list-group-item a{
			text-decoration:none;
		}
		.L_radius{
			border-radius:10px;
		}
		.bgblack3{
			background: #232328;
			padding:10px;
			border-radius:10px;
			opacity:0.9;
		}
		.bgblack3 div h4,span,h2{
			color:white;
		}
		.L_listtype span{
			color: #337ab7;
		}
		.L_listcomment span{
			color: #337ab7;
		}
		.L_righttitle span{
			color: #337ab7;
		}
	</style>
  </head>
  <body>
	<!--插入背景图片-->
	<div class="bg"></div>
	<div class="mask"></div>

	<!-- 导航-->
	<nav th:replace="_fragments :: menu(1)" ></nav>

	
	<!--中间白块-->
	<div class="container L_bg1 bgwhite1">
		<div class="row">
			<div class="col-md-6">
				<!--轮播图-->
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">
				  <!-- Indicators -->
				  <ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				  </ol>

				  <!-- Wrapper for slides -->
				  <div class="carousel-inner" role="listbox">
					<div class="item active">
					  <img src="../static/images/1.jpg" th:src="@{/images/1.jpg}">
					  <div class="carousel-caption">
						
					  </div>
					</div>
					<div class="item">
					  <img src="../static/images/2.png" th:src="@{/images/2.png}">
					  <div class="carousel-caption">
						
					  </div>
					</div>
					<div class="item">
					  <img src="../static/images/3.png" th:src="@{/images/3.png}">
					  <div class="carousel-caption">
						
					  </div>
					</div>
				  </div>

				  <!-- Controls -->
				  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				  </a>
				  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				  </a>
				</div>
			</div>
			
			<!--今日话题-->
			<div class="col-md-6">	
				<div>
					<div>
						<h1 class="JRHT">今日话题</h1>
					</div>
					<div>
						<ul class="list-group">
						  <li class="list-group-item L_size" th:each="nns:${newsNewss}"><a href="#" th:text="${nns.title}" th:href="@{/news/{newsId}(newsId=${nns.id})}">最新的新闻的标题</a></li>
						  </ul>
					</div>
				</div>
			</div>	
		</div>
	</div>
	
	<!--中间白块-->
	<div class="container L_bg2 bgwhite2">
		<!--左边栏-->
		<div class="col-md-8">
			<!--热点话题列表-->
			<div class="List">
				<h2 class="RDJX">热点精选</h2>
				<ul class="L_List" th:each="tn : ${topNews}">
					<li class="L_list">
						<div class="row">
							<div class="col-md-4">
								<a href="news.html"><img class="L_listimg" src="../static/images/list.jpg" th:src="@{/images/list.jpg}"></a>
							</div>
							<div class="col-md-8 L_listbox">	
								<div>
									<h3 class="L_listtitle"><a href="news.html" th:text="${tn.title}" th:href="@{/news/{newsId}(newsId=${tn.id})}">标题</a></h3>
								</div>
								<div class="L_listtype">
									<a href="#" th:text="${tn.type.name}">类型</a>&nbsp;
									<span>[[${#dates.format(tn.updateTime, 'yyyy-MM-dd')}]]</span>
								</div>
								<div class="L_listcomment">
									<span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
									<a href="#" th:text="${tn.views}">浏览量</a>
								</div>
							</div>
						</div>
					</li>

				</ul>
			</div>
		</div>
		
		<!--右边栏-->
		<div class="col-md-4">
			<div class="row" th:each="t : ${typesNews}">
				<div class="L_rightbox">
					<div class="L_righttitle">
						<span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
						<span>
							<a href="#" class="L_righttype" th:text="${t.key}" th:href="@{/newstype/{typeId}/{pageNum}(typeId=${t.value[0].type.id},pageNum=1)}">类型名</a>
						</span>
					</div>
					<div>
						<ul class="L_rightul" th:each="typeN : ${t.value}">
							<li class="L_rightli"><a th:text="${typeN.title}" th:href="@{/news/{newsId}(newsId=${typeN.id})}"></a></li>

						</ul>
					</div>
				</div>

			</div>
		</div>
	</div>
	
	<!--底部-->
	<footer th:replace="_fragments::footer"></footer>

	<button onclick="topFunction()" id="backtopBtn" class="btn btn-default" title="回顶部">返回顶部</button>

    <script src="../static/jquery/jquery.min.js" th:src="@{/jquery/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	
	<script>
		// 当网页向下滑动 20px 出现"返回顶部" 按钮
		window.onscroll = function() {scrollFunction()};
		 
		function scrollFunction() {console.log(121);
			if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
				document.getElementById("backtopBtn").style.display = "block";
			} else {
				document.getElementById("backtopBtn").style.display = "none";
			}
		}
		 
		// 点击按钮，返回顶部
		function topFunction() {
			document.body.scrollTop = 0;
			document.documentElement.scrollTop = 0;
		}
	</script>

  </body>
</html>